<template>
  <el-dialog
    :model-value="props.kvaVisible"
    title="损耗参数"
    width="50%"
    :before-close="handleClose"
  >
    <div class="kva">
      <el-table
        highlight-current-row
        :data="kvaData"
        style="width: 100%"
        height="350"
        @row-click="rowClick"
        @cell-dblclick="cellDblclick"
      >
        <el-table-column prop="capacity" label="变压器容量(kVA)" width="180">
          <template #default="scope">
            <el-input
              v-if="scope.row.state"
              v-model="scope.row.capacity"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row.capacity }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="activeCopperLossRate"
          label="有功铜损率"
          width="180"
        >
          <template #default="scope">
            <el-input
              v-if="scope.row.state1"
              v-model="scope.row.activeCopperLossRate"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row.activeCopperLossRate }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="reactiveCopperLossRate" label="无功铜损率">
          <template #default="scope">
            <el-input
              v-if="scope.row.state2"
              v-model="scope.row.reactiveCopperLossRate"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row.reactiveCopperLossRate }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="activeIronLossHour" label="每小时有功铁损">
          <template #default="scope">
            <el-input
              v-if="scope.row.state3"
              v-model="scope.row.activeIronLossHour"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row.activeIronLossHour }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="reactiveIronLossHour" label="每小时无功铁损">
          <template #default="scope">
            <el-input
              v-if="scope.row.state4"
              v-model="scope.row.reactiveIronLossHour"
              @focus="focusEvent(scope.row, scope.$index, scope.column)"
              @blur="blurEvent(scope.row, scope.$index, scope.column)"
            ></el-input>
            <p @click="cellClick(scope.row, scope.column)" v-else>
              {{ scope.row.reactiveIronLossHour }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { sLossParametersList, sLossParametersUpdate } from "@/api/app.js";
import { ElMessage } from "element-plus";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { lossParameters } = storeToRefs(useApp);

const emit = defineEmits(["is-show"]);
const props = defineProps({
  kvaVisible: Boolean,
  position: String,
});
const tableData = ref([]);
const kvaData = ref([]);
const currentData = ref([]);
const activeCellIndex = ref([]);
const flag = ref(false);
//初始化
onMounted(() => {
  init();
});
const handleClose = () => {
  emit("is-show");
};
const handle = () => {
  lossParameters.value[props.position] = currentData.value;
  emit("is-show");
};
const init = async () => {
  await sLossParametersList()
    .then((res) => {
      kvaData.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const rowClick = (row) => {
  currentData.value = row;
  flag.value = false;
};
const cellClick = (row, column) => {
  // console.log("cellClick", row, column.property);
  if (flag.value) {
    switch (column.property) {
      case "capacity":
        row.state = !row.state;
        break;
      case "activeCopperLossRate":
        row.state1 = !row.state1;
        break;
      case "reactiveCopperLossRate":
        row.state2 = !row.state2;
        break;
      case "activeIronLossHour":
        row.state3 = !row.state3;
        break;
      case "reactiveIronLossHour":
        row.state4 = !row.state4;
        break;
      default:
        break;
    }
  }
};
const focusEvent = (row, index, column) => {
  switch (column.property) {
    case "capacity":
      row.oldCapacity = row.capacity;
      break;
    case "activeCopperLossRate":
      row.oldActiveCopperLossRate = row.activeCopperLossRate;
      break;
    case "reactiveCopperLossRate":
      row.oldReactiveCopperLossRate = row.reactiveCopperLossRate;
      break;
    case "activeIronLossHour":
      row.oldActiveIronLossHour = row.activeIronLossHour;
      break;
    case "reactiveIronLossHour":
      row.oldReactiveIronLossHour = row.reactiveIronLossHour;
      break;
    default:
      break;
  }
};
const blurEvent = (row, index, column) => {
  switch (column.property) {
    case "capacity":
      row.state = !row.state;
      if (row.oldCapacity != row.capacity) {
        sLossParametersListApi(row);
      }
      break;
    case "activeCopperLossRate":
      row.state1 = !row.state1;
      if (row.oldActiveCopperLossRate != row.activeCopperLossRate) {
        sLossParametersListApi(row);
      }
      break;
    case "reactiveCopperLossRate":
      row.state2 = !row.state2;
      if (row.oldReactiveCopperLossRate != row.reactiveCopperLossRate) {
        sLossParametersListApi(row);
      }
      break;
    case "activeIronLossHour":
      row.state3 = !row.state3;
      if (row.oldActiveIronLossHour != row.activeIronLossHour) {
        sLossParametersListApi(row);
      }
      break;
    case "reactiveIronLossHour":
      row.state4 = !row.state4;
      if (row.oldReactiveIronLossHour != row.reactiveIronLossHour) {
        sLossParametersListApi(row);
      }
      break;
    default:
      break;
  }

  // console.log("row", row);
};
const sLossParametersListApi = async (parm) => {
  delete parm.state2;
  await sLossParametersUpdate(parm)
    .then((res) => {
      // console.log(res);
      // ElMessage({
      //   message: "修改成功",
      //   type: "success",
      // });
    })
    .catch((err) => {
      console.log(err);
    });
};
//表格双击
const cellDblclick = () => {
  flag.value = true;
};
</script>
<style lang="scss" scoped>
.ele-type {
  display: flex;
  .ele-type-item1 {
    width: 390px;
  }
  .ele-type-item2 {
    flex: 1;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .el-button {
    width: 60px;
  }
}
</style>
